<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getDeviceList, deleteDevice } from '@/assets/api/device'
import { showMsg, showConfirm } from '@/assets/js/utils'
const route = useRoute()
const router = useRouter()
function goBack() {
    router.back()
}
const deviceClassify = 1
const deviceClassId = ref('1001')
const filterForm = reactive({
    deviceClassify,
    deviceClass: deviceClassId.value,
    trans_device_code: route.query.number,
})
function searchAction() {
    getData(1)
}

const loading = ref(false)
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const dataList = ref([])
function getData(page = 1) {
    loading.value = true
    const params = Object.assign(
        {
            page,
            limit: pageSize,
            is_children: 1,
        },
        filterForm
    )
    getDeviceList(params).then((res) => {
        loading.value = false
        const { Items, totalSize } = res.data
        dataList.value = Items
        currentPage.value = parseInt(res.data.currentPage)
        total.value = totalSize
    })
}
getData(1)
function handleCurrentChange(e) {
    getData(e)
}

const activeData = ref(null)
// 新建/编辑
import newChannel from '@/components/video/channelNew.vue'
const newChannelModalVisible = ref(false)
const newChannelModalTitle = ref('')
const Channel = ref(null)
function newAction() {
    newChannelModalVisible.value = true
    newChannelModalTitle.value = '新增通道'
    Channel.value.newAction()
}
function editAction(item) {
    activeData.value = item
    newChannelModalVisible.value = true
    newChannelModalTitle.value = '编辑通道'
    Channel.value.getDetail(item.id)
}

function playbackAction(item) {
    console.log(item)
}
import channelPlay from '@/components/video/channelPlay.vue'
const channelplay = ref(null)
const playModalVisible = ref(false)
function playAction(item) {
    activeData.value = item
    playModalVisible.value = true
    channelplay.value.updateVideo(item.number)
}
function deleteAction(item) {
    showConfirm({
        content: '您确定要删除该通道吗？',
        onConfirm: () => {
            deleteDevice({ id: item.id }).then(() => {
                showMsg('删除成功')
                getData(currentPage.value)
            })
        },
    })
}
</script>

<template>
    <el-page-header @back="goBack">
        <template #content>
            <span>通道列表 </span>
        </template>
    </el-page-header>
    <div class="filter-box white-box d-flex mt-10">
        <el-form :inline="true" :model="filterForm" class="d-flex-1">
            <el-form-item label="设备名称" prop="name">
                <el-input v-model="filterForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备号" prop="number">
                <el-input v-model="filterForm.number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态" prop="currentState">
                <el-select
                    v-model="filterForm.currentState"
                    placeholder="请选择"
                >
                    <el-option label="正常" value="1" />
                    <el-option label="报警 " value="2" />
                    <el-option label="离线 " value="3" />
                    <el-option label="故障 " value="4" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchAction">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="el-form-item">
            <el-button type="primary" @click="newAction">新增</el-button>
        </div>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto">
        <el-table :data="dataList" class="my-10 full" v-loading="loading">
            <el-table-column label="通道ID" prop="number" />
            <el-table-column label="名称" prop="name" />
            <el-table-column label="安装地址" prop="position" />
            <el-table-column label="状态" prop="current_state">
                <template #default="scope">
                    <div
                        class="state-content"
                        v-if="scope.row.current_state == 1"
                    >
                        <span class="dot success mr-5"></span>
                        在线
                    </div>
                    <div class="state-content" v-else>
                        <span class="dot danger mr-5"></span>
                        离线
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-tooltip effect="dark" content="编辑" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="editAction(scope.row)"
                        >
                            <el-icon size="16"><Edit /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="播放" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="playAction(scope.row)"
                        >
                            <el-icon size="16"><VideoPlay /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="回放" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="playbackAction(scope.row)"
                        >
                            <el-icon size="16"><VideoCamera /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="deleteAction(scope.row)"
                        >
                            <el-icon size="16"><Delete /></el-icon>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="fl-bw mt-20">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>

    <newChannel
        v-model:visible="newChannelModalVisible"
        :title="newChannelModalTitle"
        :activeData="activeData"
        ref="Channel"
        @getData="getData"
    />
    <channelPlay
        ref="channelplay"
        v-model:visible="playModalVisible"
        :activeData="activeData"
    />
</template>

<style lang="scss" scoped></style>
